<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>game 打星星</title>
<style>
html,body{
    width:100%;
    height:100%;
    background-color:pink;
}
div{
    width: 200px;
    height: 50px;
    border:5px solid #fff
}
div span{
    width: 200px;
    height: 50px;
    background-color:red;
    display:block;
}

</style>
<body>
    <div>
        <span></span>
    </div>

    <script>
    function random(max,min){
    return Math.floor(Math.random()*(max-min+1)+min)
}
    var t

    t=setInterval(function(){
    var imgObj=document.createElement('img')
    imgObj.src='爱心.gif'
    imgObj.style.width=random(80,60)+'px'
    var windowW=window.innerWidth || document.documentElement.clientWidth
    var windowH=window.innerHeight || document.documentElement.clientHeight
    var maxw=windowW-imgObj.offsetWidth
    var maxh=windowH-imgObj.offsetHeight
    imgObj.style.position='fixed'
    imgObj.style.left=random(maxw,0)+'px'
    imgObj.style.top=random(maxh,0)+'px'
    document.body.appendChild(imgObj)
},1000)
var num=200
document.onclick=function(evt){
    var e=evt || window.event
    var target=e.target || e.srcElement
    if(target.nodeName==='IMG'){
        document.body.removeChild(target)
        num+=10
        if(num>=200) num=200
    }
    
}

var t2=setInterval(function(evt){
    var e=evt ||window.event
   var spanObj= document.querySelector('div span')
   
   spanObj.style.width=num+'px'
   num-=2
   if(num<0) {
        clearInterval(t)
        clearInterval(t2)
        // document.body.removeChild('img')
        // document.body.romoveChild(imgObj)
        
        return
    }
    
},1000)


    </script>
</body>

</html>